<template>
  <div class="findcard">
    <div class="item" @click="onClick(i.id)" v-for="(i, index) in item" :key="index">
      <img :src="i.cover" alt="" />
      <span>{{ i.category_name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Array,
  },
  methods:{
    onClick(id){
      this.$router.push({path:'/finddetail',query:{id:id}})
    }
  }
};
</script>

<style lang="less" scoped>
.findcard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50px;
  .item {
    width: 47%;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    img {
      width: 100%;
      display: block;
      height: auto;
    }
    span {
      position: absolute;
      z-index: 2;
      top: 5px;
      left: 5px;
      font-size: 15px;
      color: white;
      font-weight: 600;
    }
  }
}
</style>